<template>
  <view class="container">
    <!-- 顶部：设备ID与示意图 -->
    <view class="top">
      <view class="device-line">
        <text class="device-id">{{ deviceId }}</text>
        <view class="icons">
          <u-icon name="more-dot-fill" size="22" />
          <u-icon name="scan" size="22" style="margin-left: 12rpx;" />
        </view>
      </view>
      <!-- 原型主图：补水控制系统示意图 -->
      <image class="schema" mode="widthFix" src="../../../../原型/设备控制.png" />

      <!-- 快速操作入口，与原型顶部圆角按钮一致 -->
      <view class="quick-actions">
        <view class="qa-btn" @click="setSection('monitor')">参数设置</view>
        <view class="qa-btn yellow" @click="setSection('manual')">手动操作</view>
        <view class="qa-btn red" @click="autoStop">自动停止</view>
        <view class="qa-btn green" @click="autoRun">自动运行</view>
      </view>
    </view>

    <!-- 监控项版块 -->
    <view class="section">
      <view class="section-title">监控项</view>
      <view class="monitor-box">
        <!-- 预留监控项内容区域，可渲染实时数据卡片 -->
        <view class="monitor-empty">暂未接入数据</view>
      </view>
    </view>

    <!-- 手动操作版块 -->
    <view class="section">
      <view class="section-title">手动操作</view>
      <view class="manual-box">
        <view v-for="(p, i) in pumps" :key="i" class="pump-row">
          <text class="pump-name">补水泵{{ i + 1 }}（{{ p.limitLabel }}）</text>
          <view class="row-actions">
            <view class="btn blue" @click="setPump(i, true)">开启</view>
            <view class="btn red" @click="setPump(i, false)">关闭</view>
          </view>
        </view>

        <!-- 变频器频率设置 -->
        <view class="vf-title">操作变频器</view>
        <view class="vf-row">
          <text class="vf-label">运行频率</text>
          <input class="vf-input" v-model="frequency" placeholder="请输入 Hz" type="number" />
        </view>
        <view class="vf-actions">
          <view class="btn dark" @click="applyFrequency">设置频率</view>
          <view class="btn blue" @click="startVF">开启</view>
          <view class="btn red" @click="stopVF">关闭</view>
        </view>
      </view>
    </view>

    <!-- 参数设置版块 -->
    <view class="section">
      <view class="section-title">参数设置</view>
      <view class="params-box">
        <view class="tabs">
          <view v-for="t in paramTabs" :key="t" class="tab" :class="{ active: activeParamTab === t }" @click="activeParamTab = t">{{ t }}</view>
        </view>

        <view class="param-content">
          <view v-if="activeParamTab === '设备信息'" class="param-card">
            <view class="param-line"><text class="label">名称：</text><text>{{ deviceInfo.name }}</text></view>
            <view class="param-line"><text class="label">编号：</text><text>{{ deviceInfo.serial }}</text></view>
            <view class="param-line"><text class="label">型号：</text><text>{{ deviceInfo.model }}</text></view>
          </view>
          <view v-else class="param-card placeholder">{{ activeParamTab }}（占位）</view>
        </view>
      </view>
    </view>

    <!-- 远程面板版块 -->
    <view class="section">
      <view class="section-title">远程面板</view>
      <view class="remote-box">
        <view class="btn blue big" @click="openRemote">打开远程面板</view>
      </view>
    </view>
  </view>
  
</template>

<script>
export default {
  data() {
    return {
      deviceId: 'K1490078243343',
      pumps: [
        { limitLabel: '下下限' },
        { limitLabel: '下限' },
        { limitLabel: '上限' },
        { limitLabel: '上上限' },
      ],
      frequency: '',
      paramTabs: ['设备信息', '应用设置', '补水参数', '公共参数', '参数定时'],
      activeParamTab: '设备信息',
      deviceInfo: {
        name: 'K1490078243343',
        serial: 'K1490078243343',
        model: 'KT05'
      }
    }
  },
  onLoad(options) {
    if (options && options.deviceId) this.deviceId = options.deviceId
  },
  methods: {
    setSection(s) {
      // 顶部快捷入口切换到对应版块（当前页面为同页展示，入口作占位提示）
      uni.showToast({ title: `已切换到${s === 'monitor' ? '参数设置' : s === 'manual' ? '手动操作' : s}`, icon: 'none' })
    },
    setPump(i, on) {
      uni.showToast({ title: `补水泵${i + 1} ${on ? '开启' : '关闭'}（占位）`, icon: 'none' })
    },
    applyFrequency() {
      if (!this.frequency) return uni.showToast({ title: '请输入频率', icon: 'none' })
      uni.showToast({ title: `已设置频率 ${this.frequency}Hz（占位）`, icon: 'none' })
    },
    startVF() { uni.showToast({ title: '变频器开启（占位）', icon: 'none' }) },
    stopVF() { uni.showToast({ title: '变频器关闭（占位）', icon: 'none' }) },
    openRemote() { uni.showToast({ title: '远程面板占位', icon: 'none' }) }
  }
}
</script>

<style lang="scss" scoped>
page { height: 100%; }
.container { min-height: 100%; background: #f6f7fb; padding: 16rpx; }

.device-line { display: flex; align-items: center; justify-content: space-between; padding: 12rpx 6rpx; }
.device-id { font-size: 28rpx; font-weight: 600; color: #1e1f23; }
.icons { display: flex; align-items: center; }

.schema { width: 100%; border-radius: 12rpx; margin-top: 12rpx; background: #fff; }

.quick-actions { display: flex; align-items: center; justify-content: space-between; margin: 16rpx 0; }
.qa-btn { flex: 1; background: #60a4f7; color: #fff; border-radius: 34rpx; padding: 18rpx 0; text-align: center; margin-right: 16rpx; font-size: 24rpx; }
.qa-btn:last-child { margin-right: 0; }
.qa-btn.yellow { background: #f7b43c; }
.qa-btn.red { background: #ff6b6b; }
.qa-btn.green { background: #22c55e; }

.section { background: #ffffff; border-radius: 12rpx; box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04); margin-bottom: 20rpx; overflow: hidden; }
.section-title { background: #60a4f7; color: #fff; text-align: center; padding: 24rpx 0; font-size: 28rpx; font-weight: 600; }

/* 监控项 */
.monitor-box { padding: 20rpx; }
.monitor-empty { height: 260rpx; border: 2rpx solid #dfe3ea; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; color: #8b8d93; }

/* 手动操作 */
.manual-box { padding: 20rpx; }
.pump-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
.pump-name { font-size: 26rpx; color: #1e1f23; }
.row-actions { display: flex; gap: 16rpx; }
.btn { padding: 16rpx 26rpx; border-radius: 12rpx; color: #fff; font-size: 24rpx; }
.btn.blue { background: #60a4f7; }
.btn.red { background: #ff6b6b; }
.btn.dark { background: #333; }
.btn.big { height: 96rpx; display: flex; align-items: center; justify-content: center; }

.vf-title { margin-top: 12rpx; font-size: 26rpx; color: #1e1f23; }
.vf-row { display: flex; align-items: center; margin-top: 10rpx; }
.vf-label { color: #6b7280; margin-right: 12rpx; }
.vf-input { flex: 1; height: 66rpx; border: 2rpx solid #e5e7eb; border-radius: 8rpx; padding: 0 16rpx; background: #f9fafb; }
.vf-actions { display: flex; gap: 16rpx; margin-top: 16rpx; }

/* 参数设置 */
.params-box { padding: 20rpx; }
.tabs { display: flex; gap: 12rpx; margin-bottom: 16rpx; flex-wrap: wrap; }
.tab { background: #b7bfc9; color: #fff; border-radius: 18rpx; padding: 12rpx 20rpx; font-size: 24rpx; }
.tab.active { background: #60a4f7; }
.param-content { }
.param-card { border: 2rpx solid #e5e7eb; border-radius: 8rpx; padding: 16rpx; color: #1e1f23; }
.param-card.placeholder { color: #8b8d93; }
.param-line { display: flex; margin: 10rpx 0; }
.label { width: 140rpx; color: #6b7280; }

/* 远程面板 */
.remote-box { padding: 20rpx; display: flex; justify-content: center; }

</style>